<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <style type="text/css">
        .title { text-align: center ; font-size: 36px ; }
        .message { width: 50% ; margin: 10px auto ; text-align: center ; color: red ; }
        .wrapper { box-shadow: 0 0 5px 4px #dfdfdf ; width: 50% ; margin: auto ; border-radius: 5px ; }
        /* 亲子选择器 :　父元素选择器＞子元素选择器　*/
        .wrapper>form .row { margin: 5px ; border-bottom: 1px solid #dedede ; overflow: hidden ; }
        /* 后代选择器 : 祖先元素选择器 子孙元素选择器 */
        .wrapper .row label {
            float: left ; width: 20% ; height: 50px ; line-height : 50px ; text-align: right;
        }
        .wrapper .row span { float: right ; width: 80% ; height: 50px ; line-height : 50px ; text-align: left ; }
        .wrapper .row span input { margin-left: 5px ; }

        /* attribute selector (属性选择器) */
        input[name=captcha] { width: 100px ; }
    </style>

</head>
<body>

<p class="title">用户登录</p>
<div class="message">
    $!{errorMessage}
</div>
<div class="wrapper">
    <form action="/teacher/action/login" method="post">
        <div class="row">
            <label>用户名</label>
            <span> <input type="text" name="username" placeholder="请输入用户名"> </span>
        </div>
        <div class="row">
            <label>密码</label>
            <span> <input type="password" name="password" placeholder="请输入密码"> </span>
        </div>
        <div class="row">
            <label>验证码</label>
            <span>
                <input type="text" name="captcha" >
                <img src="/teacher/captcha" id="captcha">
            </span>
        </div>
        <div class="row">
            <span> <input type="submit" value="登录"> </span>
        </div>
    </form>
</div>
<script type="text/javascript">
    // 立即执行的函数表达式 ( IIFE )
    ( function(){
        // 注意 let 之后的 image 只是一个变量名称而已
        let image = document.querySelector( "#captcha" ); // 根据CSS选择器选择匹配的首个元素
        if( image ) { // 若 image 存在则为 true，否则就是 false

            image.setAttribute( "title" , "点击刷新验证码" ); // 为 img 元素设置 title 属性

            // 将一个函数作为取值赋值给一个局部变量（以后该变量即可当做函数来使用）
            let action = function(){ // function 和 () 之间没有名称的函数就是 匿名函数
                let path = "/teacher/captcha?time=" + Date.now() ;
                console.log( path );
                // 当 img 元素的 src 属性变化时，浏览器认为图片发生改变就会重新加载新的图片
                image.setAttribute( "src" , path ); // 重新设置 img 元素的 src 属性
            }

            // 为 img 元素 绑定 点击事件 ( click ) 对应的处理函数 ( action )
            image.addEventListener( "click" , action , false );
        }
    } )();
</script>

</body>
</html>